<template>
  <div>
    <Header :title="title"></Header>
    <h2>我买的玩具: {{ myBuiedToy }}</h2>
    <h2>子组件的玩具：{{ fromChildToy }}</h2>
    <el-button @click="handleClick">将我的玩具给子组件</el-button>
    <el-button @click="handleAlert">触发全局的alert事件</el-button>
    <hr>
    <MittChildCompound></MittChildCompound>
  </div>
</template>
<script lang="ts" setup>
import emitter from '@/utils/emitter';
import Header from '@/components/Header.vue';
import MittChildCompound from '@/components/passvalue/MittChildCompound.vue';
import { onUnmounted, ref } from 'vue';
import { EMittToyEvent, type IMittToy } from '@/types';
const title = "Mitt父组件"
const myBuiedToy = ref<string>('小火箭🚀')
const fromChildToy = ref<string>('')

emitter.on('test', (data) => {
  console.log(data);
})

emitter.emit('test', {
  name: 'test'
})

emitter.on(EMittToyEvent.MITT_CHILD_MYTOY, (data) => {
  fromChildToy.value = (data as IMittToy).name
})

function handleClick() {
  emitter.emit(EMittToyEvent.MITT_PARENT_MYTOY, {
    name: myBuiedToy.value,
  } as IMittToy)
}

function handleAlert() {
  emitter.emit(EMittToyEvent.MITT_GLOBAL_ALERT, "将会触发全局的alert事件")
}


onUnmounted(() => {
  emitter.off(EMittToyEvent.MITT_CHILD_MYTOY)
})

</script>
<style lang="scss" scoped></style>
